<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        b{
            color: red;
        }

        b{
            color: green;
        }

        /* 权重:10 */
        .A{
            color: green;
        }

        /* 权重2 */
        ul li{
            color: blue;
        }

        /* 权重1 */
        li{
            color: red;
        }

        .B li{
            color: purple;
        }

        /* 权重:10+10 = 20 */
        .B .A{
            color: orange;
        }

        /* 权重: 11  11个标签无法超过1个class */
        ul li p b i u del strong em ins a{
            color: red;
        }

        /* 权重: 10 */
        .C{
            color: blue;
        }
        
        /* 权重: 最高 + 1 */
        a{
            color: yellow !important;
        }

        li a{
            color: pink !important;
        }
    </style>
</head>
<body>
    <!-- 
        多个选择器 选择同一个标签时 且多个选择器的属性相同,此时发生属性冲突,按照选择器的优先级决定最终使用哪个属性

        优先级规则:
            * 权重相同时,采用就近原则 (标签有限选择较近的选择器 )
            * 权重不同时,采用权重较大的选择器
            * 最高权重 > 内联样式 > ID > class > 标签
            

        权重分配:
            * 标签选择器: 1
            * class选择器: 10
            * id选择器: 100
            * 最高权重: !important 
            (写在属性值的后面 分号的前面)

        权重叠加:
            * 权重可以叠加
            * 权重无法越级 
            (有11个标签叠加也不能超过1个class)
            * 最高权重也可以叠加
     -->

     <b>曾经有个小胖子, 贼郁闷, 经常被爸妈打, 有一天想不开, 想吊窗自杀, 一不小心把整个窗帘给扯下来了, 爸妈又是一顿打</b>

     <ul class="B">
         <li class="A">老母鸡</li>
         <li>
             <p>
                 <b>
                     <i>
                         <u>
                             <del>
                                 <strong>
                                     <em>
                                         <ins>
                                             <a href="" class="C" style="color: green">小母鸡</a>
                                         </ins>
                                     </em>
                                 </strong>
                             </del>
                         </u>
                     </i>
                 </b>
             </p>
         </li>
     </ul>
</body>
</html>